<template>
  <div class="audition70">
    <p><span class="color">.box1 ~ p</span>是选择.box1同级的、box1后面的所有p元素</p>
    <p><span class="color">.box1 + p</span>是选择.box1同级的、box1后面的第一个p元素</p>
    <p>示例：</p>
    <code class="code">
      &lt;body&gt;<br />
        <span class="indient">&lt;p class="p1"&gt;&lt;/p&gt;</span><br />
        <span class="indient">&lt;div class="box1"&gt;&lt;/div&gt;</span><br />
        <span class="indient">&lt;p class="p2"&gt;&lt;/p&gt;</span><br />
        <span class="indient">&lt;div class="box2"&gt;&lt;/div&gt;</span><br />
        <span class="indient">&lt;p class="p3"&gt;&lt;/p&gt;</span><br />
        <span class="indient">&lt;script&gt;</span><br />
        <span class="indient"><span class="indient">console.log(document.querySelectorAll('.box1 ~ p')) // NodeList(2) [p.p2, p.p3]</span></span><br />
        <span class="indient"><span class="indient">console.log(document.querySelectorAll('.box2 + p')) // NodeList [p.p3]</span></span><br />
      <span class="indient">&lt;/script&gt;</span><br />
      &lt;/body&gt;
    </code>
  </div>
</template>

<script>
export default {
  name: 'Audition70',
}
</script>

<style>

</style>